<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">分页-> 文档请参考：
          <a href="http://www.layui.com/doc/modules/laypage.html" target="_blank">
            <span>http://www.layui.com/doc/modules/laypage.html</span>
          </a>
        </div>
        <div class="layui-card-body">

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>总页数低于页码总数</legend>
          </fieldset>

          <div id="demo0_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>总页数大于页码总数</legend>
          </fieldset>

          <div id="demo1_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>自定义主题 - 颜色随意定义</legend>
          </fieldset>

          <div id="demo2_hash"></div>
          <div id="demo2_1_hash"></div>
          <div id="demo2_2_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>自定义首页、尾页、上一页、下一页文本</legend>
          </fieldset>

          <div id="demo3_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>不显示首页尾页</legend>
          </fieldset>

          <div id="demo4_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>开启HASH</legend>
          </fieldset>

          <div id="demo5_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>只显示上一页、下一页</legend>
          </fieldset>

          <div id="demo6_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>显示完整功能</legend>
          </fieldset>

          <div id="demo7_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>自定义排版</legend>
          </fieldset>

          <div id="demo8_hash"></div>
          <div id="demo9_hash"></div>
          <div id="demo10_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>自定义每页条数的选择项</legend>
          </fieldset>

          <div id="demo11_hash"></div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>将一段已知数组分页展示</legend>
          </fieldset>

          <div id="demo20_hash"></div>
          <ul id="biuuu_city_list_hash"></ul>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  layui.use(['laypage', 'layer'], function() {
    var laypage = layui.laypage,
      layer = layui.layer;

    //总页数低于页码总数
    laypage.render({
      elem: 'demo0_hash',
      count: 50 //数据总数
    });

    //总页数大于页码总数
    laypage.render({
      elem: 'demo1_hash',
      count: 70 //数据总数
        ,
      jump: function(obj) {
        console.log(obj)
      }
    });

    //自定义样式
    laypage.render({
      elem: 'demo2_hash',
      count: 100,
      theme: '#1E9FFF'
    });
    laypage.render({
      elem: 'demo2_1_hash',
      count: 100,
      theme: '#FF5722'
    });
    laypage.render({
      elem: 'demo2_2_hash',
      count: 100,
      theme: '#FFB800'
    });

    //自定义首页、尾页、上一页、下一页文本
    laypage.render({
      elem: 'demo3_hash',
      count: 100,
      first: '首页',
      last: '尾页',
      prev: '<em>←</em>',
      next: '<em>→</em>'
    });

    //不显示首页尾页
    laypage.render({
      elem: 'demo4_hash',
      count: 100,
      first: false,
      last: false
    });

    //开启HASH
    laypage.render({
      elem: 'demo5_hash',
      count: 500,
      curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
        ,
      hash: 'fenye' //自定义hash值
    });

    //只显示上一页、下一页
    laypage.render({
      elem: 'demo6_hash',
      count: 50,
      layout: ['prev', 'next'],
      jump: function(obj, first) {
        if (!first) {
          layer.msg('第 ' + obj.curr + ' 页');
        }
      }
    });

    //完整功能
    laypage.render({
      elem: 'demo7_hash',
      count: 100,
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
      jump: function(obj) {
        console.log(obj)
      }
    });

    //自定义排版
    laypage.render({
      elem: 'demo8_hash',
      count: 1000,
      layout: ['limit', 'prev', 'page', 'next']
    });
    laypage.render({
      elem: 'demo9_hash',
      count: 1000,
      layout: ['prev', 'next', 'page']
    });
    laypage.render({
      elem: 'demo10_hash',
      count: 1000,
      layout: ['page', 'count']
    });

    //自定义每页条数的选择项
    laypage.render({
      elem: 'demo11_hash',
      count: 1000,
      limit: 100,
      limits: [100, 300, 500]
    });


    //将一段数组分页展示

    //测试数据
    var data = [
      '北京',
      '上海',
      '广州',
      '深圳',
      '杭州',
      '长沙',
      '合肥',
      '宁夏',
      '成都',
      '西安',
      '南昌',
      '上饶',
      '沈阳',
      '济南',
      '厦门',
      '福州',
      '九江',
      '宜春',
      '赣州',
      '宁波',
      '绍兴',
      '无锡',
      '苏州',
      '徐州',
      '东莞',
      '佛山',
      '中山',
      '成都',
      '武汉',
      '青岛',
      '天津',
      '重庆',
      '南京',
      '九江',
      '香港',
      '澳门',
      '台北'
    ];

    //调用分页
    laypage.render({
      elem: 'demo20_hash',
      count: data.length,
      jump: function(obj) {
        //模拟渲染
        document.getElementById('biuuu_city_list_hash').innerHTML = function() {
          var arr = [],
            thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
          layui.each(thisData, function(index, item) {
            arr.push('<li>' + item + '</li>');
          });
          return arr.join('');
        }();
      }
    });

  });
</script>

<style scoped>

</style>